<template>
    <div>
        <el-card class="xj-table-list">
            <avue-crud ref="crudRole"
                       :data="data"
                       :option="option"
                       v-model:page="page"
                       v-model:search="search"
                       :table-loading="loading"
                       :cell-style="cellStyle"
                       @on-load="onLoad"
                       @refresh-change="onLoad"
                       @search-change="searchChange"
                       @row-click="handleRowClick"
            >
                <template #menu-left="{size}">
                    <span><!--  防抖动--> </span>
                    <el-button type="primary" :size="size" icon="el-icon-plus" plain @click="addDialogVisible = true">新增</el-button>
                </template>
                <template #menu="{scope,row,size,index}">
                    <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,1)">编辑</el-button>
                    <el-button type="primary" :size="size" text icon="el-icon-delete" @click="rowDel(row,index)">删除</el-button>
                </template>

                <template #disable="{row}">
                    <el-switch v-model="row.disable" @change="updDisable(row,row.disable)"
                               :active-value=0 :inactive-value=1
                               active-text="" inactive-text="">
                    </el-switch>
                </template>

                <!-- 列表上进行编辑sort -->
                <template #sort="{row,index}">
                    <el-input v-model="row.sort" @blur="rowSortBlur(row)" placeholder=""></el-input>
                </template>
            </avue-crud>
            <!-- 弹层 -->
            <el-dialog draggable title="新增" v-if="addDialogVisible" v-model="addDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Add @closeDialog="closeDialog" :uri="uri"></Add>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
            <el-dialog draggable title="编辑" v-if="updDialogVisible" v-model="updDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Upd @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>

import {defineAsyncComponent} from "vue";

export default {
    components: {
        Add: defineAsyncComponent(() => import('./roleAdd.vue')),
        Upd: defineAsyncComponent(() => import('./roleUpd.vue')),
    },
    data() {
        return {
            uri: {
                infoList: "/api/admin/sys/role/findPage",
                info: "/api/admin/sys/role",
                findMenuIdsById: "/api/admin/sys/role/findMenuIdsById",         // 获取指定角色的菜单ids
                findAuthIdsById: "/api/admin/sys/role/findAuthIdsById",         // 获取指定角色的菜单ids
                findMenuTree: "/api/admin/sys/menu/tree",         // 获取菜单数据
                findAuthTree: "/api/admin/sys/authority/list?isTree=true&isGroup=true", // 获取权限数据
                // findRoleMenu: "/api/admin/sys/role/findRoleMenu",  // 查询指定角色的菜单
                // updRoleAuth: "/api/admin/sys/role/updRoleAuth",   // 角色-分配资源
            },
            loading: true,
            dialogWidth: "80%",
            addDialogVisible: false,         // 添加弹层开关状态
            updDialogVisible: false,         // 编辑弹层开关状态
            updAuthDialogVisible: false,     // 资源分配
            rowData: {},                     // 当前选中行数据()
            menus: [],                       // 弹层菜单数据
            page: this.website.pageParams,   // 分页参数
            data: [],                        // 列表数据
            option: {},                      // 列表配置( mounted() 方法中配置)
            search: {                        // 搜索参数
            },
        }
    },

    activated: function () {
        this.crud.doLayout(this, this.$refs.crudRole)
    },
    mounted() {
        // 基础配置
        this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
        // 字段配置
        this.option.column = [
            {
                label: '角色名称',
                prop: 'name',
                search: true,
                searchSpan: 5,
                searchRules: [{
                    required: false,
                    // trigger: "blur"
                }],
            },
            {
                label: 'code',
                prop: 'code',
                search: true,
                searchSpan: 5,
            },
            {
                label: '描叙',
                prop: 'desc'
            },
            {
                label: '排序',
                prop: 'sort'
            },
            {
                label: '禁用/启用',
                prop: 'disable',
                type: "switch",
                search: true,
                searchSpan: 5,
                //cell: true,
                dicData: this.dict.get("WHETHER", false),
                //html:true,
                // formatter:(val)=>{
                //     console.log(val)
                //     return '<span style="color:red">'+val.disable+'</span>'
                // }
                //addDisplay: true,    // 添加页是否展示该字段
                //addDisabled: false   // 添加页该字段是否禁止输入(addDisplay=true时生效)
            }
        ]
    },

    methods: {
        /**
         * 直接触发：  首次自动加载 / 点击分页 / 切换分页 / 跳转也 / 点击刷新
         * 被调用触发：搜索后 /  添加/编辑保存后 / 删除后
         * @author wangsong
         */
        onLoad() {
            // 查询
            this.crud.list(this, true);
            this.crud.doLayout(this, this.$refs.crudRole)
        },
        // 搜索,并重置页数为1
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad();
            done();
        },
        // 添加/编辑保存数据后 关闭弹层+ true-刷新列表 false-不刷新
        closeDialog(isRefresh) {
            this.addDialogVisible = false;
            this.updDialogVisible = false;
            this.updAuthDialogVisible = false;
            this.rowData = {};
            if (isRefresh != null && isRefresh) {
                this.onLoad();
            }
        },
        // 行编辑
        updRow(row, type) {
            this.rowData = row;
            switch (type) {
                case 1:
                    // 编辑弹层
                    this.updDialogVisible = true;
                    break;
                case 2:
                    // 资源分配
                    this.updAuthDialogVisible = true;
                    break;
                default:
                    this.$message.error('操作类型错误');
                    break;
            }
        },
        // 行删除
        rowDel(row, index) {
            this.crud.delRow(this, this.uri.info, row.id, index);
        },
        // 启用/禁用
        updDisable(row, disable) {
            if (row.id != null) {
                this.crud.put(this.uri.info + "/" + row.id, {disable: disable});
            }
        },
        // 排序
        rowSortBlur(row) {
            if (row.id != null && this.rowData.sort != row.sort) {
                this.crud.put(this.uri.info + "/" + row.id, row);
            }
        },
        // 点击保存行数据(供行操作的任意地方获取数据)
        handleRowClick(row) {
            this.rowData = JSON.parse(JSON.stringify(row));
        },
        // 自动配置,单元格样式数字，对指定列设置字体颜色,大小，粗细等
        cellStyle({row, column}) {
            if (column.property == "disable") {
                // fontWeight: 'bold',fontSize: '20'
                return row.disable == 0 ? {color: 'green'} : {color: 'red'}
            }
        }
    }
}
</script>